<script lang="ts" setup>
import { defineProps } from 'vue';
import ShoppingCartButton from './ShoppingCartButton.vue';
export interface Product{
    id: number;
    name: string;
    describe: string;
    price: number;
    isHot?: boolean;
    quantity?: number;
}
defineProps<{
product: Product;
}>(); </script>
<template>
<div class="list_li">
<div class="li_img">商品图片</div>
<p v-text="product.name"></p>
<span v-text="product.describe"></span>
<h3>¥{{ product.price }} <span class="isHot" v-if="product.isHot">热销</span></h3>
<ShoppingCartButton :product="product"></ShoppingCartButton>
</div>
</template>
<style scoped>
.list_li{
position: relative;
width: 280px;
border-radius: 5px;
height: 100%;
text-align: left;
overflow: hidden;
margin: 0 18px 20px 0;
box-shadow:2px 2px 5px #ccc;
}
.li_img{
width:100%;
height:200px;
text-align:center;
line-height:200px;
background:#ABE1CC;
}
.list_li p{
font-size:18px;
line-height:30px;
}
.list_li span{
display:block;
font-size:14px;
color:#888;
}
.list_li h3{
font-size:28px;
color:#CF4444;
line-height:60px;
}
.list_li .isHot{
position: absolute;
padding:2px 4px;
text-align:center;
line-height:30px;
background:#CF4444;
border-radius: 10px;
top: 10px;
right: 10px;
color: yellow;
font-family:"宋体"
}</style>